<template>
	<view class="content">
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center" style="white-space:nowrap;">序号</uni-th>
				<!-- <uni-th align="center">ID</uni-th> -->
				<uni-th align="center">起</uni-th>
				<uni-th align="center">止</uni-th>
				<uni-th v-if="isEdit" align="center">操作</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in list">
				<uni-td align="center">{{index+1}}</uni-td>
				<!-- <uni-td>{{item.autoID}}</uni-td> -->
				<uni-td>
					<u-input type="number" :formatter="$gx.inputFormatter" v-model="item.dsStart" :disabled="!isEdit">
						<u--text text="m" slot="suffix" type="tips"></u--text>
					</u-input>
				</uni-td>
				<uni-td>
					<u-input type="number" :formatter="$gx.inputFormatter" v-model="item.dsEnd" placeholder="" :disabled="!isEdit">
						<u--text text="m" slot="suffix" type="tips"></u--text>
					</u-input>
				</uni-td>
				<uni-td v-if="isEdit">
					<u-button type="error" size="small" @click="delRow(item,index)" text="删除"></u-button>
				</uni-td>
			</uni-tr>

		</uni-table>
		<view class="mart-30" v-if="isEdit">
			<u-row justify="center" gutter="10">
				<u-col span="3">
					<u-button type="primary" size="small" @click="addRow" text="添加"></u-button>
				</u-col>
				<u-col span="3">
					<u-button type="success" size="small" @click="onSave" text="提交"></u-button>
				</u-col>
			</u-row>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				title:"",
				isEdit:false
			}
		},
		//生命周期-加载
		onLoad: function(option) {
			let that = this;
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
		
			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			eventChannel.on('ropeData', function(data) {
				that.init(data.data);
				if(data.data.isLook){return;}
				let {
					isEdit,
					usingData,
					wireIndex
				} = {
					...data.data
				};
				that.wireIndex=wireIndex;
				that.isEdit = isEdit;
				that.usingData = usingData
			})
			
		},
		methods: {
			addRow() {
				let {
					usingWireropeID
				} = {
					...this.usingData
				}
				this.list.push({
					usingWireropeID: usingWireropeID,
					dsStart: null,
					dsEnd: null,
				})
			},
			delRow(row,index){
				this.list.splice(index,1);
			},
			onSave() {
				uni.$emit("site2DataOperReturn", {list:this.list,wireIndex:this.wireIndex});
				uni.navigateBack({
				    delta: 1
				});
			},
			init(allData){
				let {name,data}={...allData};
				let title = "断丝数据位置范围 - " + name;
				uni.setNavigationBarTitle({    
					title: `${title}`
				});//设置标题
				this.list=data;
			},	
		}
	}
</script>

<style scoped>
	.content {
		box-sizing: border-box;
		padding-top: 30rpx;
	}

	.content /deep/ .uni-table {
		min-width: auto !important;
	}
</style>